<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"  uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title><spring:message code="head.clothGarment"></spring:message>-<spring:message code="registered"></spring:message></title>
    <link href="${pageContext.request.contextPath }/phone/css/font/iconfont.css" rel="stylesheet" type="text/css" />
    <!--公共样式-->
    <link href="${pageContext.request.contextPath }/phone/css/public.css" rel="stylesheet" type="text/css" />
    <!--登录、注册、忘记密码三个页面样式-->
    <link href="${pageContext.request.contextPath }/phone/css/login1.css" rel="stylesheet" type="text/css" />
    <style>
    .load-type-inp label{margin-left:0;width: 25%;font-weight:normal;}
    .load-type-inp .phone, .load-type-inp .secret{border:none;}
    .load-type-inp input{border:1px solid #000;border-radius:15px;height:30px;line-height:30px;text-indent:1em;width:69%;}
    .load-type-inp label{text-align:right;}
    .load-type-inp label.text-left{text-align:left;}
    a.secret_code{background:#ababab;color:#000;border-radius:0;height:30px;line-height:30px;margin: 4px 0;}
    .readagrbox{text-align:center;}
    </style>
</head>
<body>
<!--头部 begin-->
<header class="page_topbar" style="position:relative;">
    <a href="javascript:history.go(-1);" class="back Hui-iconfont"></a>
    <a href="${pageContext.request.contextPath }/api/main/index" class="home Hui-iconfont">&#xe625;</a>
    <div class="title"><spring:message code="registered"></spring:message></div> 
</header>
<!--头部 end-->

<div class="fast-load" style="margin-top:15px;"><!--普通登陆-->
<img class="loginlogo" src="${pageContext.request.contextPath }/phone/img/logo.png" />
<form id="regForm" action="javascript:void(0)">
	<input type="hidden" name="language" value="1">
	<input type="hidden" name="realname" value="${realname }">
	<input type="hidden" name="merchantType" value="${merchantType }">
	<input type="hidden" name="type" value="${type }">
    <div class="load-type-inp">
        <div class="phone">
            <label><spring:message code="login.phoneaaa.account"></spring:message>:</label>
            <input type="text" id="telphone" name="telphone" aria-required="true" aria-invalid="true" onkeyup="value=value.replace(/[^\d]/g,'')" maxlength="11" minlength="11" placeholder="<spring:message code="login.phone.pleaseAcc"></spring:message>" />
        </div>
        <div class="secret">
            <label><spring:message code="forgotPassword.code1"></spring:message>:</label>
            <input class="codeinput" type="text" id="validateCode" autocomplete="off" name="validateCode" placeholder="<spring:message code="register.phone.code"></spring:message>" />
             <a href="#" class="secret_code" onclick="getcode(this);"><spring:message code="forgotPassword.getCode1"></spring:message></a>
        
<!--             <input class="code" type="button" value="<spring:message code="forgotPassword.getCode"></spring:message>" onclick="getcode(this);" /> -->
        </div>
        <div class="secret">
            <label><spring:message code="register.phone.Pass"></spring:message>:</label>
            <input type="text" onfocus="this.type='password'" id="password" name="password" autocomplete="off" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" minlength="6" maxlength="15" placeholder="<spring:message code="register.phone.inputPass"></spring:message>" />
        </div>
        <div class="secret">
            <label><spring:message code="register.phone.conPass"></spring:message>:</label>
            <input type="text" onfocus="this.type='password'" id="confirm_password" name="confirm_password" onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" placeholder="<spring:message code="register.phone.confirmPass"></spring:message>" />
        </div>
    </div>
    <div class="readagrbox">
    	<input type="checkbox" id="agree" name="agree">
    	<label><spring:message code="registerMessage"></spring:message>
    		<a href="javascript:void(0)" class="use-protocol" style="color: #ff0000;" onfocus="this.blur();" onclick="popup()">《<spring:message code="useAgreement"></spring:message>》</a>
   		</label>
	</div>
    <div class="block-auto">
    	<a class="end-next load-step" onclick="reg();" href="#"><spring:message code="head.registered1"></spring:message></a>
   	</div>
    <%-- <div class="re-forg">
       <a class="pass" href="${pageContext.request.contextPath }/api/toPhonePage/login"><spring:message code="register.phone.loginNow"></spring:message></a>
       <div class="clearf"></div>
    </div> --%>
</form>
</div>
<!-- -注册协议弹出层- -->
<div class="popup hide">
	<div class="use-protocol-wrap messagemox">
	    <div class="hd">
	        <div class="close">
	            <i class="Hui-iconfont"></i>
	        </div>
	        <h3><span><spring:message code="ua"></spring:message></span></span></h3>
	    </div>
	    <div class="bd">
	    	<spring:message code="register.useAgreement"></spring:message>
	    </div>
	</div>
</div>


</body>
<script src="${pageContext.request.contextPath }/phone/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/h-ui/lib/layer/layer_mobile/layer.js"></script>
<script src="${pageContext.request.contextPath }/phone/js/code.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/web/js/plugins/validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/web/js/plugins/validate/messages_zh.min.js"></script>
<script type="text/javascript">
//注册协议
function popup(){
	$(".popup").removeClass("hide");
}
$(".close").click(function(){
	$(".popup").addClass("hide");
});

//注册
function reg(){
	var tel=$("#telphone").val();
	var code=$("#validateCode").val();
	var pass=$("#password").val();
	var conPass=$("#confirm_password").val();
	var mobile = /^1[3|4|5|7|8][0-9]\d{4,8}$/;
	if(tel==""||tel==null){
		layer.open({
		    content: '<spring:message code="forgotPassword.enterPhone"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(tel.length!=11){
		layer.open({
		    content: '<spring:message code="forgotPassword.enter11Digits"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(!(mobile.test(tel))){
		layer.open({
		    content: '<spring:message code="forgotPassword.phoneFormatError"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;	
	}
	$.ajax({
		url: '${pageContext.request.contextPath }/api/logIn/isTelExist',
		type:'POST',
		async : false,
		data:{telphone:tel},
		success:function(result){
			if(!result){
				layer.open({
				    content: '<spring:message code="register.registered"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
				return false;
			}
		}
	});
	if(code==""||code==null){
		layer.open({
		    content: '<spring:message code="forgotPassword.enterCode"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(pass==""||pass==null){
		layer.open({
		    content: '<spring:message code="forgotPassword.enterPassword"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(pass.length<6||pass.length>15){
		layer.open({
		    content: '<spring:message code="forgotPassword.password6To15"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(conPass==""||conPass==null){
		layer.open({
		    content: '<spring:message code="forgotPassword.rePassword"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(conPass!=pass){
		layer.open({
		    content: '<spring:message code="forgotPassword.rePasswordNot"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	if(!($("input[type='checkbox']").is(':checked'))){
		layer.open({
		    content: '<spring:message code="register.haveToAgree"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
	
	$.ajax({
		url: '${pageContext.request.contextPath }/api/logIn/register',
		type:'POST',
		data:$("#regForm").serialize(),
		success:function(result){
			if(result ==1){
				layer.open({
				    content: '<spring:message code="register.registeredSuccessfully"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
				window.setTimeout("window.location.href='${pageContext.request.contextPath }/api/toPhonePage/login'",2000);
			}else if(result ==-2){
				layer.open({
				    content: '<spring:message code="register.registered"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
			}else if(result ==3){
				layer.open({
				    content: '<spring:message code="register.noMatch"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
			}else if(result ==-1){
				layer.open({
				    content: '<spring:message code="register.codeError"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
			}else if(result ==2){
				layer.open({
				    content: '<spring:message code="register.errorMobile"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
			}else{
				layer.open({
				    content: '<spring:message code="register.error"></spring:message>'
				    ,skin: 'msg'
				    ,time: 1 //1秒后自动关闭
				  });
			}
		}
	});
}

//注册时发送验证码
var countdown = 60;
function getcode(obj) {
	var tel=$("#telphone").val();
	if(tel!=null&&tel!=""){
		var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
		 if (tel.length!=11) {
			layer.open({
			    content: '<spring:message code="forgotPassword.enter11Digits"></spring:message>'
			    ,skin: 'msg'
			    ,time: 1 //1秒后自动关闭
			  });
			return false; 
		 }
		 if(!reg.test(tel)){
			layer.open({
			    content: '<spring:message code="forgotPassword.phoneFormatError"></spring:message>'
			    ,skin: 'msg'
			    ,time: 1 //1秒后自动关闭
			  });
			return false;  
		 }
		$.ajax({
    		url: '${pageContext.request.contextPath }/api/logIn/isTelExist',
    		type:'POST',
    		data:{telphone:tel},
    		async : false,
    		success:function(result){
    			if(!result){
    				layer.open({
    				    content: '<spring:message code="register.registered"></spring:message>'
    				    ,skin: 'msg'
    				    ,time: 1 //1秒后自动关闭
    				  });
    				return false;
    			}else{
    				$.ajax({
    		    		url: '${pageContext.request.contextPath }/api/logIn/getcode',
    		    		type:'POST',
    		    		data:{telphone:tel},
    		    		success:function(result){
    		    			if(result.msg.status==1){
    		    				layer.open({
    		    				    content: '<spring:message code="forgotPassword.sendSuccess"></spring:message>'
    		    				    ,skin: 'msg'
    		    				    ,time: 1 //1秒后自动关闭
    		    				  });
    		    			}else{
    		    				layer.open({
    		    				    content: result.msg.desc
    		    				    ,skin: 'msg'
    		    				    ,time: 1 //1秒后自动关闭
    		    				  });
    		    			}
    		    		}
    		    	});
    				settime(obj);
    			}
    		}
    	});
	}else{
		layer.open({
		    content: '<spring:message code="forgotPassword.enterPhone"></spring:message>'
		    ,skin: 'msg'
		    ,time: 1 //1秒后自动关闭
		  });
		return false;
	}
}
//倒计时
function settime(obj) {
	if (countdown == 0) {
        obj.removeAttribute("disabled");
        obj.text = '<spring:message code="forgotPassword.getCode1"></spring:message>';
        countdown = 60;
        return;
    } else {
        obj.setAttribute("disabled", true);
        obj.text = "<spring:message code="forgotPassword.resend"></spring:message>(" + countdown + ")";
        countdown--;
    }
    setTimeout(function () {settime(obj)}, 1000)
}
</script>
</html>